<template>
  <div id="home">
    <nav-bar class="top">
      <div slot="center">购物街</div>
    </nav-bar>
    <tab-control
      class="tab-control-position"
      :titles="['流行', '新款', '精选']"
      @indexClick="indexClick"
      ref="tabControl1"
      v-show="isTabControlTop"
    />
    <bs-scroll
      class="text"
      ref="bsScroll"
      :probe-type="3"
      :pull-up-load="true"
      @scrollClick="scrollClick"
      @pullingUp="imgLoad"
    >
      <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad" />
      <home-recommend-view :recommend="recommend" />
      <featrue-view />
      <tab-control
        :titles="['流行', '新款', '精选']"
        @indexClick="indexClick"
        ref="tabControl2"
      />
      <good-list :goods="current" />
    </bs-scroll>
    <back-top @click.native="backClick" v-show="isShow" />
  </div>
</template>

<script>
// 轮播图组件
// 轮播图下面四个图片分类舔砖页面的组件
// 本周流行的组件
import HomeSwiper from "./childComps/HomeSwiper";
import HomeRecommendView from "./childComps/HomeRecommendView";
import FeatrueView from "./childComps/FeatrueView";

// 首页顶部公共样式组件复用封装
// 首页的流行，新款，精选分类列表组件复用封装
// 商品子组件的复用封装
// 移动端滚动复用封装
// 单击回到顶部的复用封装
// 混入
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl";
import GoodList from "components/content/goodList/GoodList";
import BsScroll from "components/common/bsscroll/BsScroll";
import { imgItemLoad, backTop } from "common/mixin";

// 网络请求数据组件
import { getHomeMultidata, getHomeGoods } from "network/home";

export default {
  data() {
    return {
      // 存储轮播图数据
      banners: [],
      recommend: [],
      // 存储商品所有数据
      goods: {
        pop: { page: 0, link: [] },
        new: { page: 0, link: [] },
        sell: { page: 0, link: [] },
      },
      // 默认展示流行数据
      currentType: "pop",
      tabControlTop: 0,
      isTabControlTop: false,
      thisPosition: 0,
    };
  },
  components: {
    HomeSwiper,
    HomeRecommendView,
    FeatrueView,
    NavBar,
    TabControl,
    GoodList,
    BsScroll,
  },

  created() {
    // 获取轮播图资源
    this.getHomeMultidata(),
      // 获取流行，新款，精选列表资源
      this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");
  },

  mixins: [imgItemLoad, backTop],
  // 监听组件销毁事件
  // destroyed() {

  // },
  // 监听组件创建时的事件（keep-alive）
  activated() {
    this.$refs.bsScroll.scroll(0, this.thisPosition, 0);
    // 解决better-scroll的bug(返回时总是往上走)
    this.$refs.bsScroll.refresh();
  },
  // 监听组件销毁时的事件（keep-alive）
  deactivated() {
    this.thisPosition = this.$refs.bsScroll.getScrollY();
    this.$bus.$off("imgItemLoad", this.itemLoad);
  },

  methods: {
    // 流行，新款，精选列表的单击传递数据
    indexClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
          break;
      }
      this.$refs.tabControl1.isIndex = index;
      this.$refs.tabControl2.isIndex = index;
    },
    // 监测子组件传回来的position
    scrollClick(position) {
      this.isShow = -position > 1000;
      this.isTabControlTop = -position > this.tabControlTop;
    },
    // 子组件传回来上拉加载函数
    imgLoad() {
      this.getHomeGoods(this.currentType);
    },
    // 监听轮播图数据加载是否完成
    swiperImageLoad() {
      this.tabControlTop = this.$refs.tabControl2.$el.offsetTop;
    },

    /**
     * 网络请求部分
     */
    // 轮播图
    getHomeMultidata() {
      getHomeMultidata().then(({ data: res }) => {
        this.banners = res.data.banner.list;
        this.recommend = res.data.recommend.list;
      });
    },
    // 流行，新款，精选列表
    getHomeGoods(type) {
      const page = this.goods[type].page + 1;
      getHomeGoods(type, page).then(({ data: res }) => {
        this.goods[type].link.push(...res.data.list);
        this.goods[type].page += 1;
        this.$refs.bsScroll.bs.finishPullUp();
      });
    },
  },

  computed: {
    // 取出数据传给对应子组件
    current() {
      return this.goods[this.currentType].link;
    },
  },
};
</script>

<style scoped>
#home {
  position: relative;
  height: 100vh;
}

.top {
  background-color: #ff8f96;
  color: #fff;
  font-size: 16px;
}

.tab-control-position {
  position: relative;
  z-index: 9;
}

.text {
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  /* 下面这个也能实现 */
  /* height: calc(100% - 93px); */
}
</style>